<template>
  <div
    class="m-card-upload"
    :style="{ width: calcWidth + 'px', height: calcHeight + 'px' }"
  >
    <!-- 已上传 -->
    <div v-if="imgUrl" class="m-card-upload__box">
      <div class="m-card-upload__box--upload-bg m-card-upload__box--hover-bg">
        <!-- 预览 -->
        <div
          v-if="calcIsPdf"
          class="m-card-upload__box--upload-bg--img"
          @click="previewpdf"
        >
          <img :src="calcBackUrl" alt="" />
        </div>
        <div
          v-else
          v-viewer
          class="m-card-upload__box--upload-bg--img"
          :url="[imgUrl]"
        >
          <img :src="calcBackUrl" alt="" />
        </div>
      </div>

      <!-- 重新上传 -->
      <div
        v-if="!$attrs.disabled && isUploadPc"
        class="m-card-upload__box--over-bg"
      >
        <div v-loading="loading" class="m-card-upload__box--over-bg--upload">
          <el-upload
            v-bind="$attrs"
            action="string"
            fit="scale-down"
            :show-file-list="false"
            v-on="$listeners"
          >
            <span>重新上传</span>
          </el-upload>
        </div>
      </div>
    </div>
    <!-- 未上传 -->
    <div v-else class="m-card-upload__box">
      <div class="m-card-upload__box--upload-bg">
        <div class="m-card-upload__box--upload-bg--img">
          <div
            v-if="isUploadPc"
            v-loading="loading"
            class="m-card-upload__box--upload-bg--img-upload"
          >
            <el-upload
              v-bind="$attrs"
              action="string"
              fit="scale-down"
              :show-file-list="false"
              v-on="$listeners"
            >
              <img
                :src="calcDefaultBgUrl"
                alt=""
                :class="{ 'back-default-img': !calcIsUseCustomImg }"
                :style="{
                  width: calcBackDefaultSize,
                  height: calcBackDefaultSize,
                  top: calcBackDefaultTop,
                }"
              />
              <!-- 自定义内容部分 -->
              <div style="position: absolute; top: 0; left: 0">
                <slot></slot>
              </div>
            </el-upload>
          </div>

          <div v-else>
            <!-- 自定义内容部分 -->
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
    <!-- 二维码上传 -->
    <div v-if="isUploadH5" class="m-card-upload_qr-code">
      <m-upload
        class="m-upload-item"
        action="uploadUrl"
        v-bind="$attrs"
        :m-props="{ urlObj: qrcode_img, urlStr: 'url' }"
      />
    </div>
  </div>
</template>
<script>
const defaultUrl = require('./img/jxt-qyre-zzxx-tj-icon.png');
const pdfUrl = require('./img/pc-qyrz-glyzl-qyrzgh-gl-bg.png');

export default {
  name: 'MCardUpload',
  // 默认不渲染
  inheritAttrs: false,
  props: {
    // 是否支持移动端扫码上传
    isUploadH5: {
      type: Boolean,
      default: true,
    },
    // 是否支持pc 端上传
    isUploadPc: {
      type: Boolean,
      default: true,
    },
    // 是否自定义没有url状态的背景图  可选值 default 和 custom
    mode: {
      type: String,
      default: 'default',
    },
    // 默认的图片 没有上传状态的背景图
    defaultBgImg: {
      default: '',
      type: String,
    },
    // 图片上传后的url
    imgUrl: {
      // default:
      //   'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      default: '',
      type: String,
    },
    // box 宽度
    width: {
      type: String,
      default: '200',
    },
    // box 高度
    height: {
      type: String,
      default: '142',
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loaded_pdf_view: pdfUrl,
      qrcode_img: {
        url: '',
      },
    };
  },
  computed: {
    // 获取box 宽度
    calcWidth() {
      return parseFloat(this.width);
    },
    // 获取box 高度
    calcHeight() {
      return parseFloat(this.height);
    },
    // 是否是pdf格式
    calcIsPdf() {
      return this.imgUrl.includes('.pdf');
    },
    // 已上传图片url
    calcBackUrl() {
      if (this.calcIsPdf) {
        return this.loaded_pdf_view;
      }
      return this.imgUrl;
    },
    // 默认图大小
    calcBackDefaultSize() {
      // 如果是自己传的的图片 默认占满
      if (this.calcIsUseCustomImg) {
        return `100%`;
      }
      // 根据不同box的高度 计算等比例的图片大小
      return `${this.calcHeight * (68 / 142)}px`;
    },
    // 默认图片 根据不同高度计算top值
    calcBackDefaultTop() {
      if (this.calcIsUseCustomImg) {
        return '0';
      }
      return `${(30 / 142) * this.calcHeight}px`;
    },
    // 是否使用自定义图片
    calcIsUseCustomImg() {
      if (this.mode === 'custom' && this.defaultBgImg) {
        return true;
      }
      return false;
    },
    // 默认展示图片url
    calcDefaultBgUrl() {
      if (this.calcIsUseCustomImg) {
        return this.defaultBgImg;
      }
      return defaultUrl;
    },
  },
  watch: {
    'qrcode_img.url': {
      handler(nv) {
        this.$emit('uploadH5Cb', {
          payload: nv,
        });
      },
    },
  },
  methods: {
    // pdf预览
    previewpdf() {
      this.$pdfViewer({ url: this.imgUrl, title: 'PDF预览' });
    },
  },
};
</script>
<style lang="less" scoped>
.m-card-upload {
  position: relative;
  .el-upload {
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  &__box {
    // position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
    &--over-bg {
      position: absolute;
      width: 100%;
      height: 40px;
      bottom: 0;
      // background-color: rgba(0, 0, 0, 0.6);
      display: none;
      z-index: -2;
      &--upload {
        text-align: center;
        width: 100%;
        height: 100%;
        .el-upload {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .el-upload {
        display: block !important;
        margin: 0 auto;
        width: 100%;
      }
      span {
        color: @fontBackgroundColor;
        text-align: center;
        font-size: @commonFontSize;
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
      }
    }
    &--upload-bg {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      // position: relative;
      .back-default-img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
      &--img {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-color: @fontBackgroundColor;
        border: 1px solid @inputBoxColor;
        border-radius: 4px;
        img {
          width: 100%;
          height: 100%;
          // display: none;
        }
        &-upload {
          width: 100%;
          height: 100%;
          .el-upload {
            width: 100%;
            height: 100%;
            display: block;
          }
          .el-upload {
            display: block !important;
            margin: 0 auto;
            width: 100%;
          }
        }
      }
    }
    &--hover-bg:hover + &--over-bg {
      z-index: 2;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.6);
      display: block;
    }
    &--over-bg:hover {
      z-index: 2;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.6);
      display: block;
    }
  }
  &_qr-code {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2000;
  }
}
</style>
